<template>
	<view class="content">
		<!-- 搜索 -->
		<view class="search_area">
			<u-search :showAction="false" color="#c8c9cc" placeholder="请输入搜索关键词" v-model="keyword"></u-search>
		</view>
		<!-- 栏目 -->
		<view class="cd-column-area">
			<view class="cd-sidebar-left">
				<view class="cd-sidebar-left-item" v-for="(item,index) in categoryList" :key="item.id">
					<view :class="sidebarIndex==index?'cd-sidebar-left-item-text active':'cd-sidebar-left-item-text'"
						@tap="clickme(index,item.id)">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 右边内容区 -->
			<view v-show="sidebarIndex==index" class="cd-sidebar-right" v-for="(item,index) in currentCategory"
				:key="item.id">
				<!-- 图片 -->
				<view class="cd-sidebar-right-img-area">
					<image class="cd-sidebar-right-img" :src="item.banner_url" mode="scaleToFill"></image>
					<view class="cd-sidebar-right-img-text">
						{{item.front_name}}
					</view>
				</view>
				<!-- 标题 -->
				<view class="cd-sidebar-right-title-area">
					<view class="cd-sidebar-right-title-box"></view>
					<view class="cd-sidebar-right-title">
						<view class="cd-sidebar-right-title-text">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 宫格内容区 -->
				<cd-grid :list="lists"></cd-grid>
			</view>
		</view>
		<customTabBar></customTabBar>
	</view>
</template>

<script>
	import customTabBar from "@/custom-tab-bar/index.vue"
	import cdGrid from "@/components/cd-grid/cd-grid.vue"
	import {
		ApiCatalog,
		ApiCatalogCurrent
	} from "@/utils/api.js"
	export default {
		data() {
			return {
				keyword: "",
				sidebarIndex: 0,
				categoryList: [],
				currentCategory: [],
				lists: []
			}
		},
		async onLoad() {
			let res = await ApiCatalog()
			if (res.errno === 0) {
				let {
					categoryList,
					currentCategory
				} = res.data
				this.categoryList = categoryList // 左边侧边栏
				this.currentCategory = categoryList // 右边侧边栏

			} else {
				uni.showToast({
					title: res.errmsg,
					icon: "error"
				})
			}
			this.getApiCatalogCurrent(1005000)
		},
		methods: {
			clickme(index, id) {
				this.sidebarIndex = index
				this.getApiCatalogCurrent(id)

			},
			// 封装分类数据请求
			async getApiCatalogCurrent(id) {
				let res = await ApiCatalogCurrent({
					id
				})
				console.log(res.data.currentCategory)
				if (res.errno === 0) {
					this.lists = res.data.currentCategory.subCategoryList
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: "error"
					})
				}
			}
		},
		components: {
			customTabBar,
			"cd-grid": cdGrid
		},
		onShow() {
			this.$store.commit("changeTabBarIndex", 2)

		}
	}
</script>

<style lang="scss">
	.content {

		// 搜索框
		.search_area {
			width: 750rpx;
			height: 108rpx;
			background-color: #fff;
			padding: 10px 12px;
			box-sizing: border-box;

		}

		// 栏目
		.cd-column-area {
			width: 750rpx;
			height: 1200rpx;
			display: flex;

			//左边侧边栏
			.cd-sidebar-left {
				flex: 1;
				max-width: 150rpx;
				background-color: #f7f8fa;

				.cd-sidebar-left-item {
					width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;

					.cd-sidebar-left-item-text {
						font-size: 28rpx;
						width: 100%;
						height: 32rpx;
						padding-left: 24rpx;
						box-sizing: border-box;
						border-left: 6rpx solid transparent;

						&.active {
							border-left: 6rpx solid red;
						}
					}
				}
			}

			//右边侧边栏
			.cd-sidebar-right {
				flex: 1;

				// 图片
				.cd-sidebar-right-img-area {
					width: 570rpx;
					height: 280rpx;
					position: relative;
					margin: 0 auto;

					.cd-sidebar-right-img {
						width: 100%;
						height: 280rpx;
						border-radius: 10rpx;
						box-shadow: 0 0 12rpx #000;
						filter: brightness(0.5)
					}

					.cd-sidebar-right-img-text {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translateY(-50%);
						transform: translateX(-50%);
						color: #fff;
					}
				}

				// 标题
				.cd-sidebar-right-title-area {
					width: 100%;
					height: 100rpx;
					background-color: #fff;
					position: relative;

					.cd-sidebar-right-title-box {
						width: 50%;
						border-bottom: 4rpx solid #ccc;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}

					.cd-sidebar-right-title {
						width: 180rpx;
						height: 80rpx;
						background-color: #fff;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);

						.cd-sidebar-right-title-text {
							text-align: center;
							line-height: 80rpx;
						}
					}
				}


			}
		}
	}
</style>
